<template>
<div style="display: flex">

      <div style="width: 1300px;display: flex;flex-wrap: wrap;" v-loading="!loading"
           element-loading-text="视频加载中">
<!--        <img src="../../../public/img/1.jpg" style="cursor:pointer" @click="imgClick(1)">-->
<!--        <img src="../../../public/img/2.jpg" style="margin-left: 100px;cursor:pointer" @click="imgClick(2)">-->
<!--        <img src="../../../public/img/3.jpg" style="margin-top: 100px;cursor:pointer" @click="imgClick(3)">-->
<!--        <img src="../../../public/img/4.jpg" style="margin-left: 100px;cursor:pointer" @click="imgClick(4)">-->



        <div v-for="(item,index) in videoOptionsArray" v-if="loading" style="margin-left: 20px;margin-top: 20px">

          <span style="margin-left: 30px">{{name[index]}}</span>
          <video-player :options="item"/>
        </div>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="videoPageCurrent"
          :page-size="4"
          layout="prev, pager, next, jumper"
          :total="videoTotal">
        </el-pagination>
      </div>

  <div>
    <avue-input-tree default-expand-all v-model="form" placeholder="请选择区域" type="tree" :dic="dic"></avue-input-tree>
  </div>

  <div>

  </div>




</div>
</template>

<script>

  import {getList} from "../../api/videoSurveillance";
  import VideoPlayer from "../../components/videoPlayer";
  export default {
      components: {
          VideoPlayer
      },
        name: "index",
        data(){
            return{
                form:"",
                dic:[],
                name:[],
                videoTotal:"",
                videoPageCurrent:"",

                videoOptionsArray:[
                    {
                    autoplay: true,
                    controls: true,
                    sources: [
                        {
                            src: "",
                        },
                    ],
                    preload: "none",
                    muted: true,
                },{
                    autoplay: true,
                    controls: true,
                    sources: [
                        {
                            src: "",
                        },
                    ],
                    preload: "none",
                    muted: true,
                },{
                    autoplay: true,
                    controls: true,
                    sources: [
                        {
                            src: "",
                        },
                    ],
                    preload: "none",
                    muted: true,
                },{
                    autoplay: true,
                    controls: true,
                    sources: [
                        {
                            src: "",
                        },
                    ],
                    preload: "none",
                    muted: true,
                },],
                urlArray:[],


                loading: false,


                videoData:"",

                name:"请选择摄像头",
                id:"请选择摄像头",
                time:"请选择摄像头",
            }
        },
        methods:{
            handleCurrentChange(){
                this.loading=false
                console.log(this.videoPageCurrent)
                this.getVideo()
            },
            async getVideo(){
                this.name=[]
                let body={pageNo:this.videoPageCurrent,pageSize:4}
                let res1= await getList('/api/resource/v1/cameras',body)
                console.log(res1.data.list,'res1')
                this.videoTotal=res1.data.total
                for(let i=0;i<res1.data.list.length;i++){
                    this.name[i]=res1.data.list[i].cameraName
                }

                for(let i=0;i<res1.data.list.length;i++){
                    let innerBody={cameraIndexCode:res1.data.list[i].cameraIndexCode,protocol:"hls",streamType: 1}
                    this.urlArray[i]= await getList('/api/video/v2/cameras/previewURLs',innerBody)
                    this.videoOptionsArray[i].sources[0].src=this.urlArray[i].data.url
                }
                this.loading=true
            },

            async getLocation(){
                // let resLocation= await getList('/api/resource/v1/regions/root',"")
                //     console.log(resLocation,'location')
                //
                // let apiPath = "/api/resource/v2/regions/subRegions";
                // let requestBody = { parentIndexCode: resLocation.data.indexCode, resourceType: "camera", pageNo: 1, pageSize: 1000 };
                // let resLocationChild= await getList(apiPath,requestBody)
                // console.log(resLocationChild,'child')

                let requestBody = { resourceType: "region",pageNo: 1, pageSize: 1000 };
                let resLocation= await getList('/api/irds/v2/region/nodesByParams',requestBody)
                console.log(resLocation.data.list,'location')
                for(let item of resLocation.data.list){
                    this.dic.push({label:item.name,value:item.indexCode})
                }



            }


        },
      mounted() {
          this.getVideo()
          this.getLocation()
      },
      beforeDestroy() {
          this.loading=false
      }

  }
</script>

<style scoped>

</style>
